import { SERVICE_API } from "@/components/CommonConstants"
import { RoleModel } from "@/components/model"
import useRpcApi from "@/hooks/useRpcApiHook"
import { Button, Form, Input, Modal, message } from "antd"
import React from "react"

/**
 * 
 * @param param0 角色设置Modal
 * @returns 
 */
function RoleSettingsFormModal({
    open,
    formData,
    handleCancel,
    handleOk,
}: {
    open: boolean
    formData: RoleModel | undefined
    handleCancel: () => void
    handleOk: () => void
}) {
    const api = useRpcApi()
    function createRole(data: FormData): Promise<any> {
        return api.apiRpc(SERVICE_API.ROLE_CREATE, data)
    }

    type FormData = {
        role_code: string
        role_name: string
        description: string
    }

    const [form] = Form.useForm<FormData>()
    const [submittable, setSubmittable] = React.useState(false)

    // Watch all values
    const values = Form.useWatch([], form)
    React.useEffect(() => {
        form.validateFields({ validateOnly: true }).then(
            () => {
                setSubmittable(true)
            },
            () => {
                setSubmittable(false)
            },
        )
    }, [form, values])

    function onCancel() {
        form.resetFields()
        handleCancel()
    }

    function onSubmit(values: FormData) {
        console.log("ok")
        // 提交, 并判断是否失败
        createRole(values)
            .then(() => {
                console.log("添加成功")
                message.success("添加成功")
                handleOk()
            })
            .catch(err => {
                const err_data: any = err.err_data
                const keys = Object.keys(err_data)
                const err_msgs = keys
                    .map(key => {
                        const v: any[] = err_data[key]
                        const ms: string[] = v.map(m => m.message)
                        return ms.join(",")
                    })
                    .join(",")

                console.error(err.message)
                message.error(`${err.message}:${err_msgs}`)
            })
    }

    return (
        <Modal title="角色设置" open={open} width={600} footer={null} onCancel={onCancel}>
            <Form
                form={form}
                layout="vertical"
                onFinish={value => {
                    onSubmit(value)
                }}
            >
                <Form.Item label="角色编码" name="role_code" rules={[{ required: true }]}>
                    <Input placeholder="请输入角色编码" />
                </Form.Item>
                <Form.Item label="角色名称" name="role_name" rules={[{ required: true }]}>
                    <Input placeholder="请输入角色名称" />
                </Form.Item>
                <Form.Item label="角色描述" name="role_description">
                    <Input placeholder="请输入角色描述" />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" disabled={!submittable}>
                        提交
                    </Button>
                    <Button onClick={onCancel}>取消</Button>
                </Form.Item>
            </Form>
        </Modal>
    )
}

export default RoleSettingsFormModal;
